<nb-card size="xsmall">
  <nb-card-body>
    <div class="map">
      <div id="mapDiv" style="width:100%;height:100%;"></div>
      <div id='overlay' style="display:none"></div>
    </div>
    <div class="left-box">
      <div class="search-box">
        <div class="hzqydiv">
          <p-button (onClick)="hzqy()" label="绘制区域"></p-button>
        </div>
        <div class="pmtdiv">
          <p-button (onClick)="scpmt()" id="btn_pmt" label="生成地下水剖面图"></p-button>
        </div>
      </div>
      <div class="search-box">
          <div class="option_lable">时间范围:</div>
          <!-- <p-multiSelect [options]="years" defaultLabel="勾选时间" maxSelectedLabels="5" [(ngModel)]="selectedYear"></p-multiSelect> -->
      </div>
      <div class="data_box">
        <div class="list-box">
          <div class="list">
            <h1 class="">阿斯达萨顶顶</h1>
            <table class="tb">
              <tr>
                <td width="10%" align="right"></td>
                <td width="90%" align="left">典型农业区</td>
              </tr>
              <tr>
                <td></td>
                <td left>所在位置：济南市候家坡村</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="list-box">
          <div class="list">
            <h1 class="">阿斯达萨顶顶</h1>
            <table class="tb">
              <tr>
                <td width="10%" align="right"></td>
                <td width="90%" align="left">典型农业区</td>
              </tr>
              <tr>
                <td></td>
                <td left>所在位置：济南市候家坡村</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="list-box">
          <div class="list">
            <h1 class="">阿斯达萨顶顶</h1>
            <table class="tb">
              <tr>
                <td width="10%" align="right"></td>
                <td width="90%" align="left">典型农业区</td>
              </tr>
              <tr>
                <td></td>
                <td left>所在位置：济南市候家坡村</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="list-box">
          <div class="list">
            <h1 class="">阿斯达萨顶顶</h1>
            <table class="tb">
              <tr>
                <td width="10%" align="right"></td>
                <td width="90%" align="left">典型农业区</td>
              </tr>
              <tr>
                <td></td>
                <td left>所在位置：济南市候家坡村</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="list-box">
          <div class="list">
            <h1 class="">阿斯达萨顶顶</h1>
            <table class="tb">
              <tr>
                <td width="10%" align="right"></td>
                <td width="90%" align="left">典型农业区</td>
              </tr>
              <tr>
                <td></td>
                <td left>所在位置：济南市候家坡村</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="list-box">
            <div class="list">
              <h1 class="">阿斯达萨顶顶</h1>
              <table class="tb">
                <tr>
                  <td width="10%" align="right"></td>
                  <td width="90%" align="left">典型农业区</td>
                </tr>
                <tr>
                  <td></td>
                  <td left>所在位置：济南市候家坡村</td>
                </tr>
              </table>
            </div>
          </div>
      </div>
    </div>
    <div class="overlay" [style.display]="showPanel?'inline':'none'">
        <div class="ol_title">
          <div class="dw">超采区地下水位剖面图</div>
          <div class="sc" (click)="hidePanel()"></div>
        </div>
        <div class="ol_panel">
            <div class="tl"></div>
        </div>
      </div>
  </nb-card-body>
</nb-card>